/**
 * Created by Administrator on 2017/9/4.
 */
function Banner(width, height) {/*类*/
    /*以下最外层div*/
    var that = this;
    this.width = width;
    this.height = height;
    this.oBox = document.getElementById("box");
    this.oBox.style.width = width;
    this.oBox.style.height = height;
    this.oBox.style.margin = "0 auto";
    this.oBox.style.overflow = "hidden";
    this.oBox.style.position = "relative";
    /*以下轮播区的div*/
    this.oBoxInner = this.oBox.getElementsByTagName('div')[0];
    this.oBoxInner.style.height = height;
    this.oBoxInner.style.position = "absolute";
    this.oBoxInner.style.left = 0;
    this.oBoxInner.style.right = 0;
    this.aDiv = this.oBoxInner.getElementsByTagName('div');//单个轮播图
    this.oBoxInner.innerHTML/* 轮播区的内部后面*/ += this.aDiv[0].outerHTML/*第一个轮播图片的外部*/;
    this.oBoxInner.style.width = parseFloat(width) * this.aDiv.length + "px";//轮播区的宽度
    for (var i = 0; i < this.aDiv.length; i++) {/*遍历轮播区的每个div及其内部的图片*/
        this.aDiv[i].style.width = width;
        this.aDiv[i].style.height = height;
        this.aDiv[i].style.float = "left";
        // this.aDiv[i].style.margin = "auto";
        this.aDiv[i].aImg = this.aDiv[i].getElementsByTagName('img')[0];
        this.aDiv[i].aImg.style.width = "100%";
        this.aDiv[i].aImg.style.height = "100%";
    }
    /*以下是焦点区部分（定位在轮播区的右下方）*/
    var oUl = document.createElement('ul');
    for (i = 0; i < this.aDiv.length - 1; i++) {
        oUl.innerHTML += '<li class=' + i + '===1?"on":null></li>';
    }
    this.oBox.appendChild(oUl);
    this.oUl = this.oBox.getElementsByTagName('ul')[0];
    this.oUl.style.position = "absolute";
    this.oUl.style.right = "10px";
    this.oUl.style.bottom = "10px";
    this.aLi = this.oUl.getElementsByTagName('li');
    for (i = 0; i < this.aLi.length; i++) {/*遍历焦点区的每个焦点*/
        this.aLi[i].style.width = "18px";
        this.aLi[i].style.height = "18px";
        this.aLi[i].style.float = "left";
        this.aLi[i].style.listStyle = "none";
        this.aLi[i].style.background = "green";
        this.aLi[i].style.borderRadius = "50%";
        this.aLi[i].style.marginLeft = "10px";
        this.aLi[i].style.cursor = "pointer";
    }
    /*以下是向左向右两个箭头式按钮*/
    for (i = 0; i < 2; i++) {
        var oA = document.createElement('a');
        oA.href = "javascript:;";
        oA.rel = "external nofollow";
        this.oBox.appendChild(oA);
    }
    /*以下是左按钮（点击它，图片向左运动）*/
    this.oBtnL = this.oBox.getElementsByTagName('a')[0];
    this.oBtnL.style.width = "30px";
    this.oBtnL.style.height = "30px";
    this.oBtnL.style.position = "absolute";
    this.oBtnL.style.top = (parseFloat(this.height) / 2 - 15) + "px";
    this.oBtnL.style.left = "30px";
    this.oBtnL.style.border = "10px solid red";
    this.oBtnL.style.borderLeft = "none";
    this.oBtnL.style.borderBottom = "none";
    this.oBtnL.style.opacity = "0.3";
    this.oBtnL.style.filter = "alpha(opacity=30)";
    this.oBtnL.style.display = "none";
    this.oBtnL.style.transform = "rotate(-135deg)";
    this.oBtnL.onclick = function () {
        if (that.step <= 0) {
            that.step = that.aDiv.length - 1;
            that.css(that.oBoxInner, 'left', -that.step * parseFloat(that.width));
        }
        that.step--;
        that.animate(that.oBoxInner, {left: -that.step * parseFloat(that.width)});
        that.bannerTip();
    };
    /*以下是右按钮（点击它，图片向右运动）*/
    this.oBtnR = this.oBox.getElementsByTagName('a')[1];
    this.oBtnR.style.width = "30px";
    this.oBtnR.style.height = "30px";
    this.oBtnR.style.position = "absolute";
    this.oBtnR.style.top = (parseFloat(this.height) / 2 - 15) + "px";
    this.oBtnR.style.right = "30px";
    this.oBtnR.style.border = "10px solid red";
    this.oBtnR.style.borderLeft = "none";
    this.oBtnR.style.borderBottom = "none";
    this.oBtnR.style.opacity = "0.3";
    this.oBtnR.style.filter = "alpha(opacity=30)";
    this.oBtnR.style.display = "none";
    this.oBtnR.style.transform = "rotate(45deg)";
    this.oBtnR.onclick = function () {
        if (that.step >= that.aDiv.length - 1) {
            that.step = 0;
            that.css(that.oBoxInner, 'left', 0)
        }
        that.step++;
        that.animate(that.oBoxInner, {left: -that.step * parseFloat(that.width)}, 1000);
        that.bannerTip();
    };
    /*以下是其它*/
    this.step = 0;//记录每次运动
    this.timer = null;//定时器
    this.init();//初始化轮播图
}
Banner.prototype = {//类的原型
    constructor: Banner,
    /*getCss：获取元素的属性值*/
    getCss: function (curEle, attr) {
        var val = null;
        var reg = null;
        if (getComputedStyle) {//标准浏览器
            val = getComputedStyle(curEle, false)[attr];
        } else {//非标准浏览器
            if (attr === 'opacity') {
                val = curEle.currentStyle.filter; //'alpha(opacity=10)'
                reg = /^alpha\(opacity[=:](\d+)\)$/i;
                return reg.test(val) ? reg.exec(val)[1] / 100 : 1;
            }
            val = curEle.currentStyle[attr];
        }
        reg = /^[+-]?((\d|([1-9]\d+))(\.\d+)?)(px|pt|rem|em)$/i;
        return reg.test(val) ? parseInt(val) : val;
    },
    /*setCss：设置元素的属性值*/
    setCss: function (curEle, attr, value) {
        if (attr === 'float') {
            curEle.style.cssFloat = value;
            curEle.style.styleFloat = value;
            return;
        }
        if (attr === 'opacity') {
            curEle.style.opacity = value;
            curEle.style.filter = 'alpha(opacity=' + (value * 100) + ')';
            return;
        }
        var reg = /^(width|height|top|right|bottom|left|((margin|padding)(top|right|bottom|left)?))$/i;
        if (reg.test(attr)) {
            if (!(value === 'auto' || value.toString().indexOf('%') !== -1)) {
                value = parseFloat(value) + 'px';
            }
        }
        curEle.style[attr] = value;
    },
    /*setGroupCss：设置元素的一组属性值*/
    setGroupCss: function (curEle, options) {
        if (options.toString() !== '[object Object]') return;
        for (var attr in options) {
            this.setCss(curEle, attr, options[attr]);
        }
    },
    /*css：getCss、setCss、setGroupCss的合写*/
    css: function () {
        if (typeof arguments[1] === 'string') {
            if (typeof arguments[2] === 'undefined') {
                return this.getCss(arguments[0], arguments[1]);//当第三个参数不存在，是获取；
            } else {
                this.setCss(arguments[0], arguments[1], arguments[2]);//当第三个参数存在时，是设置；
            }
        }
        if (arguments[1].toString() === '[object Object]') {
            this.setGroupCss(arguments[0], arguments[1]);//设置元素的一组属性值
        }
    },
    /*animate：轮播图动画函数*/
    animate: function (curEle, target, duration) {
        /*1.定义动画的运行轨迹*/
        function tmpEffect(t, b, c, d) {
            return b + c / d * t;//开始时的位置+总变化/总时间*已经过去的时间
        }

        /*2.为公式的每个参数做准备*/
        var begin = {};
        var change = {};
        for (var attr in target) {
            begin[attr] = this.css(curEle, attr);
            change[attr] = target[attr] - begin[attr];
        }
        duration = duration || 700;
        var time = 0;
        var that = this;
        /*3.开启一个定时器，让时间不断累加；根据时间和公式，求出最新的位置；*/
        clearInterval(curEle.timer); //开起一个定时器前，先关闭没用的定时器
        curEle.timer = setInterval(function () {
            time += 10;
            /*4.定时器停止运动的条件（time>=duration）*/
            if (time >= duration) {
                that.css(curEle, target);
                clearInterval(curEle.timer);
                return;
            }
            /*5.拿到每个属性的最新值，并且赋值给元素对应的属性；*/
            for (var attr in target) {
                var curPos = tmpEffect(time, begin[attr], change[attr], duration);
                that.css(curEle, attr, curPos);
            }
        }, 10)
    },
    /*初始化轮播图*/
    init: function () {
        var _this = this;
        /*1.开启自动轮播*/
        this.timer = setInterval(function () {
            _this.autoMove();
        }, 2000);
        /*2.开启焦点，每个焦点与每张轮播图对应*/
        this.bannerTip();
        /*3.鼠标移入轮播区，轮播暂停；鼠标移出轮播区，轮播恢复*/
        this.over_out();
        /*4.点击焦点，响应对应的轮播图片*/
        this.handleChange();
    },
    handleChange: function () {
        for (var i = 0; i < this.aLi.length; i++) {
            this.aLi[i].index = i;
            var that = this;
            this.aLi[i].onclick = function () {
                that.step = this.index;
                that.animate(that.oBoxInner, {left: -that.step * parseFloat(that.width)});
                that.bannerTip();
            }
        }
    },
    autoMove: function () {
        if (this.step >= this.aDiv.length - 1) {
            this.step = 0;
            this.css(this.oBoxInner, 'left', 0)
        }
        this.step++;
        this.animate(this.oBoxInner, {left: -this.step * parseFloat(this.width)}, 1000);
        this.bannerTip();
    },
    bannerTip: function () {
        var tmpStep = this.step >= this.aLi.length ? 0 : this.step;
        for (var i = 0; i < this.aLi.length; i++) {
            this.aLi[i].className = i === tmpStep ? 'on' : null;
            if (this.aLi[i].className === "on") {
                this.aLi[i].style.background = "red";
            } else {
                this.aLi[i].style.background = "green";
            }
        }
    },
    over_out: function () {
        var _this = this;
        _this.oBox.onmouseover = function () {
            clearInterval(_this.timer);
            _this.oBtnL.style.display = 'block';
            _this.oBtnR.style.display = 'block';
        };
        _this.oBox.onmouseout = function () {
            _this.timer = setInterval(function () {
                _this.autoMove()
            }, 2000);
            _this.oBtnL.style.display = 'none';
            _this.oBtnR.style.display = 'none';
        }
    }
};